<template>
  <div class="system-log">
    <div class="header-section">
      <h2>系统日志</h2>
      <div class="search-bar">
        <el-input
          v-model="searchForm.operator"
          placeholder="操作人"
          class="search-input"
        />
        <el-input
          v-model="searchForm.action"
          placeholder="操作内容"
          class="search-input"
        />
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="date-picker"
        />
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </div>
    </div>

    <div class="table-section">
      <el-table :data="logList" style="width: 100%">
        <el-table-column prop="id" label="序号" min-width="60" />
        <el-table-column prop="operator" label="操作人" min-width="100" />
        <el-table-column prop="ip" label="IP地址" min-width="140" />
        <el-table-column prop="action" label="操作内容" min-width="200" />
        <el-table-column prop="module" label="操作模块" min-width="100" />
        <el-table-column prop="actionType" label="操作类型" min-width="100">
          <template #default="scope">
            <el-tag :type="getActionTypeTagType(scope.row.actionType)">
              {{ scope.row.actionType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="操作时间" width="180" />
        <el-table-column label="操作" width="80" fixed="right">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="handleView(scope.row)"
            >
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 日志详情对话框 -->
    <el-dialog
      v-model="detailDialogVisible"
      title="日志详情"
      width="600px"
      :close-on-click-modal="false"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="操作人">{{
          currentLog.operator
        }}</el-descriptions-item>
        <el-descriptions-item label="IP地址">{{
          currentLog.ip
        }}</el-descriptions-item>
        <el-descriptions-item label="操作内容">{{
          currentLog.action
        }}</el-descriptions-item>
        <el-descriptions-item label="操作模块">{{
          currentLog.module
        }}</el-descriptions-item>
        <el-descriptions-item label="操作类型">{{
          currentLog.actionType
        }}</el-descriptions-item>
        <el-descriptions-item label="操作时间">{{
          currentLog.createTime
        }}</el-descriptions-item>
        <el-descriptions-item label="详细信息" v-if="currentLog.detail">
          <pre style="white-space: pre-wrap; word-break: break-all">{{
            currentLog.detail
          }}</pre>
        </el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </template>
    </el-dialog>

    <!-- 批量操作 -->
    <div class="batch-operations">
      <el-button type="danger" @click="handleExport">导出日志</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";
import { ElMessage } from "element-plus";

// 搜索表单
const searchForm = reactive({
  operator: "",
  action: "",
});

const dateRange = ref([]);

// 分页信息
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 100,
});

// 对话框状态
const detailDialogVisible = ref(false);
const currentLog = ref({});

// 模拟日志数据
const logList = ref([
  {
    id: 1,
    operator: "admin",
    ip: "192.168.1.100",
    action: "登录系统",
    module: "登录",
    actionType: "登录",
    createTime: "2023-01-15 09:00:00",
    detail: "用户admin从IP地址192.168.1.100成功登录系统",
  },
  {
    id: 2,
    operator: "admin",
    ip: "192.168.1.100",
    action: "添加用户",
    module: "用户管理",
    actionType: "添加",
    createTime: "2023-01-15 09:30:00",
    detail: "用户admin添加了新用户：testuser",
  },
  {
    id: 3,
    operator: "admin",
    ip: "192.168.1.100",
    action: "编辑角色",
    module: "角色管理",
    actionType: "编辑",
    createTime: "2023-01-15 10:15:00",
    detail: "用户admin编辑了角色：管理员",
  },
  {
    id: 4,
    operator: "user1",
    ip: "192.168.1.101",
    action: "查看部门列表",
    module: "部门管理",
    actionType: "查询",
    createTime: "2023-01-15 11:00:00",
    detail: "用户user1查看了部门列表",
  },
  {
    id: 5,
    operator: "user2",
    ip: "192.168.1.102",
    action: "修改个人密码",
    module: "个人设置",
    actionType: "修改",
    createTime: "2023-01-15 13:45:00",
    detail: "用户user2修改了自己的登录密码",
  },
  {
    id: 6,
    operator: "admin",
    ip: "192.168.1.100",
    action: "删除部门",
    module: "部门管理",
    actionType: "删除",
    createTime: "2023-01-15 14:30:00",
    detail: "用户admin删除了部门：测试部门",
  },
  {
    id: 7,
    operator: "user3",
    ip: "192.168.1.103",
    action: "登录系统",
    module: "登录",
    actionType: "登录",
    createTime: "2023-01-15 15:00:00",
    detail: "用户user3从IP地址192.168.1.103成功登录系统",
  },
  {
    id: 8,
    operator: "admin",
    ip: "192.168.1.100",
    action: "分配权限",
    module: "角色管理",
    actionType: "修改",
    createTime: "2023-01-15 16:20:00",
    detail: "用户admin为角色：部门经理分配了新的权限",
  },
  {
    id: 9,
    operator: "user4",
    ip: "192.168.1.104",
    action: "退出系统",
    module: "登录",
    actionType: "退出",
    createTime: "2023-01-15 17:00:00",
    detail: "用户user4成功退出系统",
  },
  {
    id: 10,
    operator: "admin",
    ip: "192.168.1.100",
    action: "查看系统日志",
    module: "系统日志",
    actionType: "查询",
    createTime: "2023-01-15 17:30:00",
    detail: "用户admin查看了系统操作日志",
  },
]);

// 获取操作类型标签类型
const getActionTypeTagType = (actionType) => {
  switch (actionType) {
    case "登录":
      return "primary";
    case "退出":
      return "info";
    case "添加":
      return "success";
    case "编辑":
    case "修改":
      return "warning";
    case "删除":
      return "danger";
    case "查询":
      return "info";
    default:
      return "info";
  }
};

// 搜索功能
const handleSearch = () => {
  ElMessage.success("搜索功能已触发");
};

// 重置搜索
const resetSearch = () => {
  searchForm.operator = "";
  searchForm.action = "";
  dateRange.value = [];
};

// 查看日志详情
const handleView = (row) => {
  currentLog.value = { ...row };
  detailDialogVisible.value = true;
};

// 导出日志
const handleExport = () => {
  ElMessage.success("日志导出成功");
};

// 分页功能
const handleSizeChange = (size) => {
  pagination.pageSize = size;
};

const handleCurrentChange = (current) => {
  pagination.currentPage = current;
};
</script>

<style scoped>
.system-log {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

.header-section {
  margin-bottom: 20px;
}

.header-section h2 {
  margin-bottom: 16px;
  color: #333;
}

.search-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.search-input {
  width: 180px;
}

.date-picker {
  width: 280px;
}

.table-section {
  margin-bottom: 20px;
  overflow-x: auto;
}

.el-table {
  width: 100%;
}

/* 优化表格布局，消除右侧空白 */
.el-table__header,
.el-table__body {
  width: 100% !important;
}

/* 让表格列自动填充可用空间 */
.el-table__header-wrapper,
.el-table__body-wrapper {
  overflow-x: visible;
}

.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.batch-operations {
  margin-bottom: 16px;
}

pre {
  font-family: inherit;
  margin: 0;
  color: #666;
}
</style>
